<template>
  <div class="article">
    <van-tabs v-model="active" @click="onClick" color="#ccc">
      <van-tab title="推荐"> </van-tab>
      <van-tab title="最新"> </van-tab>
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HmArticle",
  data() {
    return {
      // active: 0,
      active: Number(localStorage.getItem("active")) || 0, // 从 localStorage 获取 active 值, 如果没有则默认 0
    };
  },
  methods: {
    onClick(active) {
      this.active = active; // 更新 active 值
      localStorage.setItem("active", active); // 存储 active 值到 localStorage
      //如果跳转页为当前页,则不跳转
      const path = `/index/article/${active === 0 ? "recommend" : "new"}`;
      if (this.$route.path === path) return;
      this.$router.push(path);
    },
  },
  //组件销毁时,清除 localStorage 中的 active 值
  beforeDestroy() {
    localStorage.removeItem("active");
  },
};
</script>

<style lang="less" scoped></style>
